<template>
    <div class="mui-content feedbackInput mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <textarea v-model="feedbackContent" id="textarea" rows="10" placeholder="请填写您的意见或者建议信息。" class="evaluateComment"></textarea>
            </ul>

            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-text-left" id="ucenterPhone">
                    <p class="mui-navigate-right">
                        <span class="text2-size color1 mgr1">联系电话</span>
                        <span class="mui-pull-right color2 text2-size mgr1"  v-if="feedbackTel!=''" @click="changePhone()">{{feedbackTel}}</span>
                        <span class="mui-pull-right color3 text2-size mgr1"  v-if="feedbackTel==''" @click="changePhone()">请输入联系人手机</span>
                    </p>
                </li>
            </ul>
            <div class="operateBtn">
                <button class="mui-btn mui-btn-primary" @click="feedback()">提交</button>
            </div>
        </div>
    </div>
</template>
<style>
    .feedbackInput .evaluateComment{border: none; padding: 0.1rem 0.3rem; font-size: 0.25rem;}
    .feedbackInput #ucenterPhoneInput{border: 0; height: 0.4rem; line-height: 0.4rem; width: 3rem;}
</style>

<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
        vuex:{
            getters:{
                profilePhone(state) {
                    if (state.enterpriseFlag) {
                        return state.profile.enterpriseTel==undefined?'':state.profile.enterpriseTel;
                    } else {
                        return state.profile.peoplePhone==undefined?'':state.profile.peoplePhone;
                    }
                }
            }
        },
        data(){
            return{
                feedbackContent:'',
                feedbackTel:''
            }
        },
        ready () {
            mui.init();
            this.feedbackTel = this.profilePhone;
            /*上拉下拉*/
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
        },
        methods:{
            feedback:function(){
                let that = this;
                //验证手机号
                let isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
                let isMob=/^((\+?86)|(\+86))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
                let val = that.feedbackTel.replace(/\s+/g,""); //获取输入手机号码
                if(val.length ==0||val=='' || !(isMob.test(val) || isPhone.test(val))) {
                    mui.toast('请填写正确的手机号');
                    return false;
                }else if (this.feedbackContent === '') {
                    mui.toast('评价下我们的服务吧，我们将进一步改善服务！');
                    return false;
                } else {
                    this.post(API.POST_FEEDBACK, {feedbackContent:that.feedbackContent,feedbackTel:that.feedbackTel}, res => {
                        this.$route.router.go('/tip/success/feedback');
                    });
                }
            },
            changePhone:function () {
            	let that = this;
                var ucenterPhone=mui('#ucenterPhone span')[1];
                var b=ucenterPhone.innerText;
                var input = "<input type='tel' pattern='[0-9]*'  maxlength='11' id='ucenterPhoneInput' value=''/>";
                ucenterPhone.innerHTML=input;
                var ucenterPhoneInput=document.getElementById('ucenterPhoneInput');
                ucenterPhoneInput.addEventListener('tap',function () {
                    return false;
                });
                /*文本框获取焦点*/
                ucenterPhoneInput.focus();
                ucenterPhoneInput.addEventListener('blur',function () {
                    var newtxt = ucenterPhoneInput.value;
                    //判断文本有没有修改
                    if (newtxt != b) {
                        if (newtxt == null||newtxt == ''){
                            ucenterPhone.innerText=b;
                            that.feedbackTel = b;
                        }else {
                            ucenterPhone.innerText=newtxt;
                            that.feedbackTel = newtxt;
                            console.log(that.feedbackTel);
                        }
                    } else {
                        ucenterPhone.innerText=b;
                        that.feedbackTel = b;
                    }
                })
            }
        },
        components:{
        }
    });
</script>
